<!-- TextBox.vue -->
<template>
  <div class="container">
    <div class="head_container">
      <div class="id_container">ID:{{ id }}</div>
      <div class="text_container">文本</div>
    </div>
    <div class="rich_editor_menu">
      <Toolbar
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
      />
    </div>
    <div class="rich_text_container">
      <span style="width: 72px;height: 24px;color: #c4c4c4">文本内容:</span>
    
      <div class="rich_editor_container">
        <Editor 
          v-model="valueHtml"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="handleCreated"
        />
      </div>
    </div>
    <div class="next_step">下一步:<input
      style="width: 550px;height: 50px;margin-left: 78px;background-color: #232323"
      v-model="nextStep"></input></div>
    <button v-if="btnShow"  class="saveButton" @click="handleSave()">保存</button>
  </div>
</template>

<script lang="ts">
import {defineComponent, PropType} from 'vue';
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import {onBeforeUnmount, ref, shallowRef, onMounted,watch} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {IToolbarConfig} from '@wangeditor/editor'

const btnShow = ref(false);

// 定义响应式变量绑定input值
const inputValue = ref('')
// 记录变化日志
const changeLog = ref('')




export default defineComponent({
  
  name: 'TextEditor',
  components: {Editor, Toolbar},
  props: {
    id: {
      type: String as PropType<string>,
      default: "0000"
    },
    valueFromParent: {
      type: Object as PropType<Object>,
      required: true,
      default: {}
    }
  },
  emits: ['save'], // 定义自定义事件
  setup(props, {emit}) {
    onMounted(() => {
      
    })

    const handleSave = () => {
      props.valueFromParent.moduleValue.value = valueHtml.value
      props.valueFromParent.moduleNext = nextStep.value
      const updatedContent = {...props.valueFromParent};
      emit('save', updatedContent); // 触发save事件并传递valueHtml
      btnShow.value = false
    };

    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref(props.valueFromParent?.moduleValue.value)
    const defaultNextId = props.id.split("-")[0]+"-"+ (Number(props.id.split("-")[1])+1)
    // const nextStep = ref(props.valueFromParent?.moduleNext?props.valueFromParent?.moduleNext:defaultNextId)
    const nextStep = ref(
      props.valueFromParent?.moduleNext && props.valueFromParent.moduleNext !== ""
        ? props.valueFromParent.moduleNext
        : defaultNextId
    );

    watch(()=>props.valueFromParent,(newVal)=>{
      valueHtml.value = newVal.moduleValue.value
      nextStep.value =  newVal.moduleNext;
    },{deep:true})

    // 监听inputValue的变化
    watch(valueHtml, (newVal, oldVal) => {
      changeLog.value = `从 "${oldVal}" 变为 "${newVal}"`
      if (newVal !== oldVal) {
        btnShow.value = true
      }
    },{deep:true})

   

    // const toolbarConfig: Partial<IToolbarConfig> = {
    //   toolbarKeys: [
    //     "bold",
    //     "italic",
    //     "justifyLeft",
    //     "justifyCenter",
    //     "justifyRight",
    //     "underline",
    //     "through",

    //   ]
    // }
    const toolbarConfig: any = { excludeKeys: "fullScreen" };
    const editorConfig = {placeholder: '请输入内容...'}

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

    
  

    return {
      btnShow,
      nextStep,
      handleSave,
      editorRef,
      valueHtml,
      mode: 'simple', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated
    };
  }
});
</script>
<style>
.w-e-toolbar {
  /* 改为透明 */
  background-color: rgba(0, 0, 0, 0) !important;
  /* 改为红色 */
}

#w-e-textarea-1 {
  background-color: #232323;
  color: #dedede;
  overflow: auto;
  scrollbar-width: none;
}

[id^="w-e-textarea-"] {
  background-color: #232323;
  color: #dedede;
  height: 101px;
}

</style>

<style scoped>
.rich_editor_menu {
  width: 544px;
  margin-left: 197px;
}

.rich_editor_container {
  width: 544px;
  height: 250px;
  margin-left: 58px;
}

.rich_text_container {
  display: flex;
  width: 680px;
  height: 250px;
  margin-left: 66.5px;
}

.next_step {
  display: flex;
  margin-left: 66.5px;
  margin-top: 30px;
  color: #c4c4c4;
}

.head_container {
  width: 811px;
  height: 55px;
  background-color: #525252;
  display: flex;
  align-items: center;

  .id_container {
    width: 75px;
    height: 25px;
    color: #a3a3a3;
    margin-left: 20px;
    margin-right: 298.5px;
  }

  .text_container {
    width: 44px;
    height: 30px;
  }
}

.container {
  width: 811px;
  height: 644.7px;
  background-color: #383838;
}

textarea {
  width: 100%;
  box-sizing: border-box;
}

.saveButton {
  height: 60px;
  width: 671px;
  background-color: #ff8d1a;
  color: #78491b;
  margin-left: 66.5px;
  margin-top: 30px;
  border-radius: 10px;
}

html.dark {
  --w-e-textarea-bg-color: #333;
  --w-e-textarea-color: #fff;
}

</style>
